<template>
  <scroll-view style="width: 100%" scroll-x>
    <div class="uv-tab" :style="{ backgroundColor: bgColor }">
      <div
        class="uv-tab-item"
        @click="changeIndex(index)"
        :class="
          placeholder
            ? placeholder === item
              ? ''
              : 'uv-tab-acitve-item'
            : currentIndex === index
            ? 'uv-tab-acitve-item'
            : ''
        "
        :style="{
          color: placeholder
            ? placeholder === item
              ? color
              : activeColor
            : currentIndex === index
            ? activeColor
            : color,
        }"
        v-for="(item, index) in list"
        :key="item"
      >
        <div class="uv-tab-item-text">
          {{ item }}
        </div>
        <div
          v-if="currentIndex === index"
          class="uv-tab-line"
          :style="{ height: lineHeight, backgroundColor: lineColor }"
        />
      </div>
    </div>
  </scroll-view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  acitveIndex: {
    type: Number,
    default: 0,
  },
  bgColor: {
    type: String,
  },
  color: {
    type: String,
  },
  activeColor: {
    type: String,
  },
  lineHeight: {
    type: String,
  },
  lineColor: {
    type: String,
  },
  list: {
    type: Array,
  },
  // 用于给cascader选择器使用
  placeholder: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['change'])

const currentIndex = ref(0)

watch(
  () => props.acitveIndex,
  (newValue) => {
    currentIndex.value = newValue
  },
  {
    immediate: true,
  },
)

const changeIndex = (index) => {
  emit('change', index)
  currentIndex.value = index
}
</script>

<style lang="scss" scoped>
.uv-tab {
  display: flex;
  justify-content: flex-start;
  padding: 0 12px;
  width: 100%;
  height: 44px;
  font-size: 14px;
  background-color: #ffffff;
  gap: 0 10px;
  .uv-tab-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: #1989fa;
  }
  .uv-tab-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #646566;
    .uv-tab-item-text {
      white-space: nowrap;
    }
  }
  .uv-tab-acitve-item {
    font-weight: 700;
    color: #323233;
  }
}
</style>
